<template>
    <el-container class="panelManager">
        <el-tabs model-value="PropertyPanel" class="tabs" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="属性" name="PropertyPanel" style="height: 100%; overflow: scroll;">
                <PropertyPanel v-model:node="props.node"></PropertyPanel>
            </el-tab-pane>
        </el-tabs>
    </el-container>
</template>

<script setup lang="ts">
import { ref,computed, watch, shallowRef, defineComponent, defineAsyncComponent, defineProps, onMounted } from 'vue'
import type {PropType} from 'vue'
import { Node } from "@antv/x6";
import PropertyPanel from './Panels/PropertyPanel.vue';
// import EventPanel from './Panels/EventPanel.vue';
// import StylePanel from './Panels/StylePanel.vue';

const props = defineProps({
  node: { type: Node as PropType<Node|null>, required: true }
})

const handleClick = ()=>{}


</script>
<style scoped>
.tabs{
    width: 100%;
    position: relative;;
}
.panelManager {
    height: 100%;
    border-left: solid 1px #dcdfe6;
}
</style>

<style>
.panelManager .el-tabs__content{
    height: 100%;
}
.panelManager .el-tabs {
    display: flex;
    flex-direction: column;
}
</style>
